<template>
  <q-btn-group outline>
    <template v-for="(item, index) in list" :key="index">
      <q-btn flat round :icon="item.icon" @click="onClick(item.type)">
        <q-tooltip>{{ item.title }}</q-tooltip>
      </q-btn>
    </template>
  </q-btn-group>
</template>

<script lang="ts">
import { defineComponent, toRefs } from  'vue';

export default defineComponent({
  name: 'ButtonBox',
  props: {
    list: {
      type: Object,
      required: true
    }
  },

  setup (props, context) {
    // 解构props，简单类型，只读类型
    let {
      list
    } = toRefs(props);

    //点击事件
    const onClick = (ev: string) => {
      context.emit('click-event', ev);
    }

    return {
      list,
      onClick
    };
  }
});

</script>

<style lang="scss" scoped>

</style>
